<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--患者数据-->
            <el-form
                :model="queryParams"
                ref="queryForm"
                size="small"
                :inline="true"
                v-show="showSearch"
                label-width="100px"
            >
                <el-form-item label="专病名称">
                    <el-select
                        v-model="queryParams.diseaseId"
                        placeholder="请选择专病名称"
                        clearable
                        style="width: 240px"
                        @change="getListClassify"
                    >
                        <el-option
                            v-for="dict in dict.type.sys_manage_diseases"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="专病分类">
                    <el-select
                        v-model="queryParams.diseaseClassifyId"
                        placeholder="请选择专病名称"
                        clearable
                        style="width: 240px"
                    >
                        <el-option
                            v-for="item in classifyList"
                            :key="item.diseaseClassifyId"
                            :label="item.diseaseClassifyName"
                            :value="item.diseaseClassifyId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="患者姓名">
                    <el-input
                        v-model="queryParams.patientName"
                        placeholder="请输入患者姓名"
                        clearable
                        style="width: 240px"
                    />
                </el-form-item>
                <el-form-item label="患者状态">
                    <el-select
                        v-model="queryParams.status"
                        placeholder="请选择患者状态"
                        clearable
                        style="width: 240px"
                    >
                        <el-option
                            v-for="dict in dict.type.sys_diagnosis_status"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="专属医生">
                    <el-select
                        v-model="queryParams.doctor"
                        placeholder="请选择专属医生"
                        clearable
                        style="width: 240px"
                    >
                        <el-option
                            v-for="item in doctorList"
                            :key="item.userId"
                            :label="item.userName"
                            :value="item.userId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="表单类型">
                    <el-select
                        v-model="queryParams.formType"
                        placeholder="请选择表单类型"
                        clearable
                        style="width: 240px"
                        @change="getListForm"
                    >
                        <el-option
                            v-for="dict in dict.type.sys_form_type"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="表单名称">
                    <el-select
                        v-model="queryParams.formId"
                        placeholder="请选择表单名称"
                        clearable
                        style="width: 240px"
                    >
                        <el-option
                            v-for="item in formList"
                            :key="item.formId"
                            :label="item.formName"
                            :value="item.formId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="反馈情况">
                    <el-select
                        v-model="queryParams.feedback"
                        placeholder="请选择反馈情况"
                        clearable
                        style="width: 240px"
                    >
                        <el-option
                            v-for="dict in dict.type.sys_form_feedback"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                        v-model="dateRange"
                        style="width: 240px"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    ></el-date-picker>
                </el-form-item>

                <el-form-item label="入库天数>=">
                    <el-input
                        v-model="queryParams.days"
                        placeholder="请输入入库天数"
                        clearable
                        style="width: 240px"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="handleQuery"
                    >搜索</el-button>
                    <el-button
                        icon="el-icon-refresh"
                        size="mini"
                        @click="resetQuery"
                    >重置</el-button>
                </el-form-item>
            </el-form>

            <el-row
                :gutter="10"
                class="mb8"
            >
                <el-col :span="1.5">
                    <el-button
                        type="success"
                        plain
                        icon="el-icon-edit"
                        size="mini"
                        :disabled="single"
                        @click="handleUpdate"
                        v-hasPermi="['system:inquiry:edit']"
                    >下发并提醒</el-button>
                </el-col>

                <right-toolbar
                    :showSearch.sync="showSearch"
                    @queryTable="getVisitFormLog"
                    :columns="columns"
                ></right-toolbar>
            </el-row>

            <el-table
                v-loading="loading"
                :data="visitFormLogList"
                @selection-change="handleSelectionChange"
            >
                <el-table-column
                    type="selection"
                    width="50"
                    align="center"
                />
                <el-table-column
                    label="就诊记录编号"
                    align="center"
                    key="visitLogId"
                    prop="visitLogId"
                    v-if="columns[0].visible"
                />
                <el-table-column
                    label="专病名称"
                    align="center"
                    key="diseaseId"
                    prop="diseaseId"
                    v-if="columns[1].visible"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <span>{{ matchDict("sys_manage_diseases",scope.row.diseaseId)}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    label="专病分类"
                    align="center"
                    key="diseaseClassifyName"
                    prop="diseaseClassifyName"
                    v-if="columns[2].visible"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="患者状态"
                    align="center"
                    key="status"
                    prop="status"
                    v-if="columns[3].visible"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <span>{{ matchDict("sys_diagnosis_status",scope.row.status)}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="患者姓名"
                    align="center"
                    key="patientName"
                    prop="patientName"
                    v-if="columns[4].visible"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="性别"
                    align="center"
                    key="status"
                    prop="status"
                    v-if="columns[5].visible"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <span>{{ matchDict("sys_user_sex",scope.row.sex)}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    label="患者手机"
                    align="center"
                    key="patientPhone"
                    prop="patientPhone"
                    v-if="columns[6].visible"
                    :show-overflow-tooltip="true"
                />

                <el-table-column
                    label="专属医生"
                    align="center"
                    key="doctorName"
                    prop="doctorName"
                    v-if="columns[7].visible"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    label="反馈情况"
                    align="center"
                    key="feedback"
                    prop="feedback"
                    v-if="columns[8].visible"
                    :show-overflow-tooltip="true"
                > <template slot-scope="scope">
                        <span>{{ matchDict("sys_form_feedback",scope.row.diseaseId)}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="创建时间"
                    align="center"
                    prop="createTime"
                    v-if="columns[9].visible"
                    width="160"
                >

                </el-table-column>
                <el-table-column
                    label="备注"
                    align="center"
                    key="remark"
                    prop="remark"
                    v-if="columns[10].visible"
                    :show-overflow-tooltip="true"
                />

                <el-table-column
                    label="操作"
                    align="center"
                    width="160"
                    class-name="small-padding fixed-width"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleremind(scope.row)"
                            v-hasPermi="['system:inquiry:edit']"
                        >提醒</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getVisitFormLog"
            />
        </el-row>
    </div>
</template>
<script>
import { listUser } from "@/api/system/user";
import { listVisitFormLog } from "@/api/diseaseCourse/inquiry";
import { listForm } from "@/api/system/form";
export default {
    name: "inquiry",
    dicts: [
        "sys_user_sex",
        "sys_normal_disable",
        "sys_manage_diseases",
        "sys_diagnosis_status",
        "sys_form_type",
        "sys_form_feedback",
    ],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 患者表格数据
            visitFormLogList: null,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 日期范围
            dateRange: [],
            // 表单参数
            form: {},
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                diseaseId: undefined,
                diseaseClassifyId: undefined,
                status: undefined,
            },
            // 列信息
            columns: [
                { key: 0, label: `就诊记录编号`, visible: true },
                { key: 1, label: `专病名称`, visible: true },
                { key: 2, label: `专病分类`, visible: true },
                { key: 3, label: `患者状态`, visible: true },
                { key: 4, label: `患者姓名`, visible: true },
                { key: 5, label: `性别`, visible: true },
                { key: 6, label: `患者手机`, visible: true },
                { key: 7, label: `专属医生`, visible: true },
                { key: 8, label: `反馈情况`, visible: true },
                { key: 9, label: `创建时间`, visible: true },
                { key: 10, label: `备注`, visible: true },
            ],
            // 表单校验
            rules: {
                diseaseId: [
                    {
                        required: true,
                        message: "患者名称不能为空",
                        trigger: "blur",
                    },
                ],
                diseaseClassifyName: [
                    {
                        required: true,
                        message: "患者分类不能为空",
                        trigger: "blur",
                    },
                ],
            },
            //是否数组
            yesOrNoArr: ["是", "否"],
            patientInfo: {
                patientName: undefined,
                patientPhone: undefined,
                sex: undefined,
                age: undefined,
                area: undefined,
                address: undefined,
            },
            patientFormRules: {
                patientName: [
                    {
                        required: true,
                        message: "患者姓名不能为空",
                        trigger: "blur",
                    },
                ],
                sex: [
                    {
                        required: true,
                        message: "患者性别不能为空",
                        trigger: "blur",
                    },
                ],
                age: [
                    {
                        required: true,
                        message: "患者年龄不能为空",
                        trigger: "blur",
                    },
                ],
                patientPhone: [
                    {
                        required: true,
                        message: "患者手机号不能为空",
                        trigger: "blur",
                    },
                ],
                area: [
                    {
                        required: true,
                        message: "患者地址不能为空",
                        trigger: "blur",
                    },
                ],
            },
            classifyList: [],
            doctorList: [],
            formList: [],
        };
    },
    created() {
        this.getVisitFormLog();
        this.getDoctorData();
    },
    computed: {},
    methods: {
        /** 通过问诊类别查询问诊表单列表 */
        getListForm() {
            listForm({
                pageNum: 1,
                pageSize: 1000,
                formType: this.queryParams.formType,
            }).then((response) => {
                this.formList = response.rows;
                this.total = response.total;
            });
        },
        /** 查询专属医生 */
        getDoctorData() {
            listUser({ pageNum: 1, pageSize: 1000, roleId: 101 }).then(
                (res) => {
                    this.doctorList = res.rows;
                }
            );
        },

        /** 通过专病名称选择得出专病分类 */
        getListClassify(value) {
            listClassify({
                pageNum: 1,
                pageSize: 1000,
                diseaseId: Number(value),
            }).then((response) => {
                this.classifyList = response.rows;
            });
        },

        /** id转化成对应的文字 */
        matchDict: function (key, id) {
            let _this = this;
            const result = _this.dict.type[key];
            let textValue = "";
            result.forEach((item) => {
                if (item.raw.dictValue == id) {
                    textValue = item.raw.dictLabel;
                }
            });
            return textValue;
        },

        /** 查询就诊列表 */
        getVisitFormLog() {
            this.loading = true;
            listVisitFormLog(
                this.addDateRange(this.queryParams, this.dateRange)
            ).then((response) => {
                this.visitFormLogList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                userId: undefined,
                deptId: undefined,
                userName: undefined,
                nickName: undefined,
                password: undefined,
                phonenumber: undefined,
                email: undefined,
                sex: undefined,
                status: "0",
                remark: undefined,
                avatar: undefined,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getVisitFormLog();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.planId);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "新增患者";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const diseaseClassifyId = row.diseaseClassifyId || this.ids;
            getClassify(diseaseClassifyId).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = "修改患者";
            });
        },
        /** 重置密码按钮操作 */
        handleResetPwd(row) {
            this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                closeOnClickModal: false,
                inputPattern: /^.{5,20}$/,
                inputErrorMessage: "患者密码长度必须介于 5 和 20 之间",
            })
                .then(({ value }) => {
                    resetUserPwd(row.userId, value).then((response) => {
                        this.$modal.msgSuccess("修改成功，新密码是：" + value);
                    });
                })
                .catch(() => {});
        },

        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.form.diseaseClassifyId != undefined) {
                        updateClassify(this.form).then((response) => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getVisitFormLog();
                        });
                    } else {
                        addClassify(this.form).then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getVisitFormLog();
                        });
                    }
                }
            });
        },
        /** 提醒按钮操作 */
        handleremind(row) {},
    },
};
</script>